<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作node</title>
    <style type="text/css">
        .container {
            overflow: auto;
            border: 1px solid blue;
            margin: 15px;
        }
        
        .container span {
            float: left;
            width: 100px;
            height: 100px;
            margin: 5px;
            background: #dedede;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
        }
        
        .container span:nth-child(3) {
            background: #9696fa;
        }
        
        .container button {
            margin: 5px;
        }
    </style>
    <script type="text/javascript">
        let x = Object.create(null);
        x.create = function() {
            // 选择 匹配 选择器 的 第一个元素 (返回单个元素或null)
            let container = document.querySelector('.first');
            if (container) {
                // 创建一个新的span元素
                let span = document.createElement('span');

                // 将新创建的元素添加到 container 内部的末尾
                container.appendChild(span);
            }
        }
        x.clone = function() {
            // 选择 匹配 选择器 的 第一个元素 (返回单个元素或null)
            let container = document.querySelector('.first');
            if (container) {
                // 获得 container 内部的第一个子元素
                let target = container.firstElementChild;
                if (target) {
                    // 通过 cloneNode 来复制一个节点
                    let span = target.cloneNode(true);
                    console.log(span);
                    // 将复制得到的元素添加到 container 内部的末尾
                    container.appendChild(span);
                }
            }
        }
        x.remove = function() {
            let container = document.querySelector('.first');
            // 获得 container 内部的最后一个子元素
            let last = container.lastElementChild;
            if (last) {
                // parent.removeChild( child )
                container.removeChild(last);
                return;
            }
            console.log('啥也没有了，还删个P呀!');
        }
        x.insert = function() {
            let container = document.querySelector('.first');
            // 使用 结构伪类选择器 选择 container 内部指定元素
            let ref = document.querySelector('.first>span:nth-child(3)');
            if (container && ref) {
                // 创建新节点
                let node = document.createElement('span');

                node.innerText = Date.now();
                node.style.fontSize = '12px';

                // 在 container 内部 ref 之前 插入 node
                container.insertBefore(node, ref);
            }
        }
        x.replace = function() {
            let container = document.querySelector('.first');
            let ref = document.querySelector('.first>span:nth-child(3)');
            if (container && ref) {

                let node = document.createElement('span');
                node.innerText = Date.now();
                node.style.fontSize = '12px';

                container.replaceChild(node, ref);
            }
        }
        x.root = function() {
            let container = document.querySelector('.first');
            if (container) {
                let root = container.getRootNode();
                console.log(root);
            }
        }
    </script>
</head>

<body>
    <div class="container first">
        <span>
                <b>1</b>
            </span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="container second">
        <!-- 使用 onclick 方式可以绑定 click 事件的监听器 -->
        <button type="button" onclick="location.reload()">刷新页面</button>
        <!-- 为 按钮绑定 点击事件 对应的 事件监听器( event listener ) -->
        <button type="button" onclick="x.create()">创建并添加新元素</button>

        <button type="button" onclick="x.clone()">复制并添加元素</button>

        <button type="button" onclick="x.remove()">删除尾部元素</button>

        <button type="button" onclick="x.insert()">插入新元素</button>

        <button type="button" onclick="x.replace()">替换元素</button>

        <button type="button" onclick="x.root()">获取根节点</button>
    </div>
    <div class="container">
        <ul>
            <li>
                <div>Node.prototype.appendChild : parent.appendChild( child ) </div>
            </li>
            <li>
                <div>Node.prototype.cloneNode : target.cloneNode( true | false ) </div>
                <ul>
                    <li>target.cloneNode(true) 表示克隆 target 节点及其子节点</li>
                    <li>false 是默认值</li>
                    <li>false 表示浅克隆 ，即仅克隆当前节点，不考虑其后代节点</li>
                    <li>true 表示深克隆 ，即既克隆当前节点，也克隆其后代节点</li>
                </ul>
            </li>
            <li>
                <div>Node.prototype.removeChild : parent.removeChild( child )</div>
                <ul>
                    <li>参数 child 必须是 parent 内部的子元素才可以被删除</li>
                </ul>
            </li>
            <li>
                <div>Node.prototype.insertBefore : parent.insertBefore( node , ref )</div>
                <ul>
                    <li>在 perent 内部的 ref 之前 插入 node </li>
                </ul>
            </li>
            <li>
                <div>Node.prototype.replaceChild : parent.replaceChild( node , ref )</div>
                <ul>
                    <li>用 node 替换 perent 内部的 ref </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>